<template>
  <el-container class="home">
    <div>
      <el-menu
          class="el-menu-vertical-demo"
          :collapse="isCollapsed"
          :unique-opened="false"
          background-color="#5e616d"
          text-color="#fff"
          active-text-color="#ffd04b"
          :router="true"
      >
        <submenu :menus="parentMenus"></submenu>
      </el-menu>
    </div>
    <div :class="['main',{collapsed:isCollapsed}]">
      <div class="top">
        <div class="front">
          <el-button @click="isCollapsed = !isCollapsed">
            <el-icon
            >
              <component :is="isCollapsed ? 'expand' : 'fold'"></component
              >
            </el-icon>
          </el-button>
        </div>
        <div class="rear">
          <span class="nickname">起凡</span>
          <el-dropdown>
            <el-icon>
              <Setting/>
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>查看</el-dropdown-item>
                <el-dropdown-item>新增</el-dropdown-item>
                <el-dropdown-item>删除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <el-card class="card">
        <router-view/>
      </el-card>
    </div>
  </el-container>
</template>
<script lang="ts">
import {defineComponent, provide, readonly, ref} from "vue";
import submenu from "@/components/submenu.vue";
import {getUserMenus} from "@/api/system/menu";

export default defineComponent({
  name: "index",
  components: {
    submenu,
  },
  setup() {
    let isCollapsed = ref(true);
    provide("isCollapsed", readonly(isCollapsed));
    let parentMenus = getUserMenus();
    console.log(parentMenus);
    return {parentMenus, isCollapsed};
  },
  methods: {},
});
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 10vw;
}

.el-menu-vertical-demo {
  height: 100%;
}

.main {
  &.collapsed {
    width: 95vw;
  }

  width: 90vw;

  .top {
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  }

  .rear {
    display: flex;
    align-items: center;

    .nickname {
      margin-right: 4px;
    }
  }
}

.card {
  margin: 1rem;
}
</style>
